<div class="form-input">
    <ui-select ng-if="context.multiple"
               multiple
               ng-model="context.modelValue"
               ng-disabled="disabled"
               ng-class="{ disabled: isNoItems }"
               on-select="selectValue($item, $model)"
               on-remove="removeValue($item, $model)">
        <ui-select-match placeholder="{{ placeholder || 'platform.placeholders.select-values' | translate }}">
            {{ isNoItems ? ('platform.list.loading' | translate) : $item.name || ('platform.list.item-not-found' | translate) }}
        </ui-select-match>
        <ui-select-choices repeat="x.id as x in items | filter: { name: $select.search }"
                           refresh="fetch($select)"
                           refresh-delay="0"
                           when-scrolled="fetchNext($select)">
            <span ng-bind-html="x.name | highlight: $select.search" ng-show='!isNoItems'></span>
        </ui-select-choices>
    </ui-select>
    <ui-select ng-if="!context.multiple"
               ng-model="context.modelValue"
               ng-required="context.required"
               ng-disabled="disabled"
               ng-class="{ disabled: isNoItems }"
               on-select="selectValue($item, $model)"
               on-remove="removeValue($item, $model)">
        <ui-select-match allow-clear="true" placeholder="{{ placeholder || 'platform.placeholders.select-value' | translate }}">
            {{ isNoItems ? ('platform.list.loading' | translate) : $select.selected.name || ('platform.list.item-not-found' | translate) }}
        </ui-select-match>
        <ui-select-choices repeat="x.id as x in items | filter: { name: $select.search }"
                           refresh="fetch($select)"
                           refresh-delay="300"
                           when-scrolled="fetchNext($select)">
            <span ng-bind-html="x.name | highlight: $select.search" ng-show='!isNoItems'></span>
        </ui-select-choices>
    </ui-select>
</div>
